<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-7"></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">{{title}}</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row">
              <label class="col-md-4 col-form-label form-control-label">已经关联的活动内容</label>
              <div class="col-md-8">
                <base-input v-model="model.linkedquestitle"></base-input>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-md-4 col-form-label form-control-label">正在关联的广告内容</label>
              <div class="col-md-8">
                <base-input v-model="model.linkedquestitle"></base-input>
              </div>
            </div>

            <div class="form-group row">
              <label class="col-md-4 col-form-label form-control-label">选择活动 [一个活动可以绑定到多个广告内容中]</label>
              <div class="col-md-8">
                <select v-model="this.model.selected" @change="selectFn($event)">
                  <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据-->
                  <option v-for="item in this.model.artsitems" v-bind:value="item.id" >{{item.qtitle}}</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label for="example-time-input" class="col-md-4 col-form-label form-control-label"></label>
              <div class="col-md-8">
                <base-button type="success" @click="bindArticleToArtquest()">
                  <i class="ni ni-send"></i>绑定活动
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//import validate from "~/config/utils/validate";
//import dateTools from "~/config/utils/date-tools";
// import { findLinkedArtquestApi } from "~/config/api/xwarticleservice";
// import { bindArticleToArtquestApi } from "~/config/api/xwarticleservice";
// import { findCanLinkedArtquestApi } from "~/config/api/xwarticleservice";
export default {
  asyncData() {},
  components: {},
  data() {
    return {
      title: "给广告关联一个活动内容",
      showSaveBtn: false,
      showUpdateBtn: false,
      model: {
        linkedquestitle: "",
        artquestid: "",
        articleid: "",
        selectItem: "",
        selected:"1",
        artsitems: [{
          "id":"0",
          "qtitle":"请选择活动"
        },{
          "id":"1",
          "qtitle":"请选择活动1"
        }]
      }
    };
  },
  created: function() {
    //this.model.articleid = this.$route.query.articleid;
  },
  mounted: function() {
   // this.findLinkedArtquest();
    //this.findCanLinkedArtquest();
  },
  methods: {
    selectFn: function(e) {
      this.model.artquestid = e.target.value;
    },

    async findCanLinkedArtquest() {
      let params = {};
      await findCanLinkedArtquestApi(params).then(res => {
        if (res.sucflag) {
          for (var i = 0; i < res.beanlist.length; i++) {
            let data = {
              id: res.beanlist[i].id,
              qtitle: res.beanlist[i].qtitle
            };
            this.model.artsitems.push(data);
          }
        }
      });
    },

    //查询这片文章关联的互动话题
    async findLinkedArtquest() {
      let params = {
        articleid: this.model.articleid
      };
      await findLinkedArtquestApi(params).then(res => {
        if (res.sucflag) {
          this.model.linkedquestitle = res.bean.qtitle;
        }
      });
    },

    /**
     * 更新互动题目关联
     */
    async bindArticleToArtquest() {
      let params = {
        artquestid: this.model.artquestid,
        articleid: this.model.articleid
      };
      await bindArticleToArtquestApi(params).then(res => {
        if (res.sucflag) {
          this.$notify({
            type: "success",
            verticalAlign: "top",
            horizontalAlign: "center",
            message: "绑定成功"
          });
        }
      });
    }
  },
  layout: "DashboardLayout"
};
</script>
